<template>
  <div>
    <van-nav-bar title="城市列表" left-arrow @click-left="$router.back()" fixed />
    <van-index-bar :index-list="indexList" :sticky="false" class="CityList">
      <van-index-anchor index="#">当前城市</van-index-anchor>
      <van-cell :title="valCity.label" @click="saveSity(valCity)" />

      <van-index-anchor index="热">热门城市</van-index-anchor>
      <van-cell
        v-for="(item, index) in hotCityList"
        :key="index"
        :title="item.label"
        @click="saveSity(item)"
      />
      <div v-for="(item, index) in NameList" :key="index">
          <van-index-anchor :index="index.toUpperCase()">{{ index.toUpperCase() }}</van-index-anchor>
            <van-cell
              v-for="(i,ind) in item"
              :key="ind"
              :title="i.label"
              @click="saveSity(i)"
            />
            <template v-if="!NameList[index].length">
              <van-cell title="暂无城市"/>
            </template>
      </div>
      <!-- <van-cell title="幻想乡" />
  <van-cell title="提瓦特" /> -->
    </van-index-bar>
  </div>
</template>

<script>
import { getCity, getHotCity } from '@/api/homo'
import { getCity as getCityStorage, setCity } from '@/utils/storage'
export default {
  data () {
    return {
      hotCityList: [],
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'N',
        'M',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      NameList: {
        a: [],
        b: [],
        c: [],
        d: [],
        e: [],
        f: [],
        g: [],
        h: [],
        i: [],
        j: [],
        k: [],
        l: [],
        m: [],
        n: [],
        o: [],
        p: [],
        q: [],
        r: [],
        s: [],
        t: [],
        u: [],
        v: [],
        w: [],
        x: [],
        y: [],
        z: []
      },
      valCity: {},
      CityList: []
    }
  },
  async created () {
    const { body: cityList } = await getCity()
    this.cityList = cityList
    const { body: hotCityList } = await getHotCity()
    this.hotCityList = hotCityList
    const valCity = getCityStorage()
    this.valCity = valCity
    this.cityList.forEach((item) => {
      // console.log(/^\w/g.exec(item.pinyin)[0])
      const val = /^\w/g.exec(item.pinyin)[0]
      this.NameList[val].push({ label: item.label, value: item.value })
    })
  },
  methods: {
    saveSity (val) {
      if (this.hotCityList.filter(item => item.label === val.label).length) {
        setCity(val)
        this.$router.push('/')
      } else {
        this.$toast('该城市暂无房源')
      }
    }
  }
}
</script>

<style lang="less" scope>
.CityList {
  margin-top: 45px;
  .van-index-anchor{
    color: #999;
  }
  .van-cell__title{
    font-size: 16px;
    line-height: 30px;
  }
  .van-index-bar__sidebar{
  margin-top: 22px;
    .van-index-bar__index{
      padding: 1px;
      margin-bottom: 6px;
      font-size: 14px;
    }
    .van-index-bar__index.van-index-bar__index--active{
      color: #fff;
      background-color: @blue;
      border-radius: 20px;
    }
  }
}
</style>
